<template>
  <div class="setting-container">
    <div class="app-container">
      <el-tabs>
        <el-tab-pane label="角色信息">
          <!-- 新增角色按钮 -->
          <el-row>
            <el-col>
              <el-button type="primary" size="small" icon="el-icon-plus" @click="showDialog = true">新增角色 </el-button>
            </el-col>
          </el-row>

          <!-- 表格 -->
          <el-table
            :border="true"
            style="width: 100%"
            :data="roleInfo"
          >
            <el-table-column label="序号" width="120px" type="index" align="center" header-align="left" />
            <el-table-column label="名称" width="240px" prop="name" align="center" />
            <el-table-column label="描述" prop="description" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="{row}">
                <el-button type="success" @click="getPermissionList(row.id)">分配权限</el-button>
                <el-button type="primary" @click="editRole(row.id)">编辑</el-button>
                <el-button
                  type="danger"
                  @click="DeleteRoleById(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <el-col :span="7">
              <!-- total写100 实则只有10条数据 -->
              <el-pagination
                layout="prev,pager,next"
                :total="page.total"
                :page-size="2"
                @current-change="changePage"
              />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="公司信息">
          <!-- 信息公告 -->
          <el-alert
            title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
            type="info"
            show-icon
          />
          <!-- 公司信息表单 -->
          <el-form label-width="120px" style="margin-top: 50px; height: 100px">
            <el-form-item label="企业名称" style="width: 500px">
              <el-input
                v-model="companyInfo.name"
                :placeholder="companyInfo.name"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="公司地址" style="width: 500px">
              <el-input
                v-model="companyInfo.companyAddress"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="电话" style="width: 500px">
              <el-input
                v-model="companyInfo.companyPhone"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="邮箱" style="width: 500px">
              <el-input
                v-model="companyInfo.mailbox"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item label="备注" style="width: 500px">
              <el-input
                v-model="companyInfo.remarks"
                type="textarea"
                :rows="5"
                :disabled="true"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 弹层 -->
      <el-dialog
        :visible="showDialog"
        title="编辑角色"
        @close="btnClose"
      >
        <el-form
          ref="roleForm"
          label-width="120px"
          :model="roleForm"
          :rules="rules"
        >
          <el-form-item label="角色名称" style="width:500px" prop="name">
            <el-input v-model="roleForm.name" />
          </el-form-item>
          <el-form-item label="角色描述" style="width:500px">
            <el-input v-model="roleForm.description" />
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="center" align="middle">
              <el-col :span="15">
                <el-button @click="btnClose">取消</el-button>
                <el-button type="primary" @click="btnOk">确认</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 分配权限 弹层 -->
      <el-dialog :visible="showPermDialog" @close="btnPermCancel">
        <!-- 权限数据 -->
        <el-tree
          ref="addPerm"
          :data="permData"
          :props="defaultProps"
          :show-checkbox="true"
          node-key="id"
          :default-checked-keys="selectPerm"
          :check-strictly="true"
        />
        <!-- 按钮 -->
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <el-button @click="btnPermCancel">取消</el-button>
            <el-button type="primary" @click="btnPermOk">确认</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>>

<script>
import {
  getAllRoleAPI,
  getCompanyInfoByIdAPI,
  DeleteRoleByIdAPI,
  editRoleByIdAPI,
  getDetailRoleByIdAPI,
  addRoleAPI,
  getPermissionListAPI,
  assignPermAPI
} from '@/api'
import { mapGetters } from 'vuex'
import { transListToTreeData } from '@/utils'
export default {
  data() {
    return {
      // 1. 参数1 对象：页码及每页条数
      page: {
        pagesize: 2, // 每页条数
        page: 1, // 当前页码
        total: 0 // 总记录数
      },
      // 2. 参数2 承接对象 所有角色
      roleInfo: [],
      // 3. 参数3 公司信息
      companyInfo: {},
      // 4. 参数4 控制弹出层 编辑 新增
      showDialog: false,
      // 5. 参数5 专门接受新增or编辑的表单数据
      roleForm: {
      },
      // 6. 参数6 校验的规则
      rules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '角色名称不能为空'
          }
        ]
      },

      // 7. 参数7 分配权限 弹层
      showPermDialog: false,

      // 8. 参数8 所有权限数据
      permData: [],

      // 9. 树显示的字段
      defaultProps: {
        label: 'name',
        children: 'children'
      },

      // 10. 参数10 记录角色权限点的id
      roleId: null,

      // 11. 存储 角色对应权限变量
      selectPerm: []
    }
  },
  created() {
    // 所有角色
    this.getAllRole()
    // 根据id查询公司信息
    this.getCompanyInfoById()
  },
  methods: {
    ...mapGetters(['companyId']),
    // 1. 获取所有的角色
    async  getAllRole() {
      // 缺一个数据
      // 接口传参多一个数据有没有问题？没问题
      const { total, rows } = await getAllRoleAPI(this.page)
      console.log(total)
      console.log(rows)
      this.roleInfo = rows
      // 修改page里面的total参数 请求接口后 知道了总的数据条数total，然后修改this.page
      this.page.total = total
    },
    // 2. 页码改变时 触发的函数
    changePage(newpage) {
      // newpage是 改变后的当前页 假如当前页码是第二条，总共有5条数据，每页两条数据 那么响应的就是3-4条数据
      this.page.page = newpage
      // 重新调用 获取角色
      this.getAllRole()
    },
    // 3. id => 公司信息
    async getCompanyInfoById() {
      const res = await getCompanyInfoByIdAPI(this.companyId)
      console.log(res)
      this.companyInfo = res
    },

    // 4. id =》删除角色
    async DeleteRoleById(id) {
      await this.$confirm('确认删除该角色嘛', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await DeleteRoleByIdAPI(id)
      console.log(res)
      // 重新获取 角色信息
      this.getAllRole()
    },

    // 5. 编辑接口
    async editRole(id) {
      // 数据回写
      this.roleForm = await getDetailRoleByIdAPI(id)
      // 显示弹层
      this.showDialog = true
      // 校验成功
    },
    // 6. 点击确认 表单校验 提交后台
    async btnOk() {
      // this.$refs.roleForm.validate(async isOk => {
      //   if (isOk) {
      //     try {
      //       if (this.roleForm.id) {
      //       // 编辑角色
      //       // 再提交后台 编辑成功
      //         await editRoleByIdAPI(this.roleForm)
      //       } else {
      //       // 新增角色
      //         await addRoleAPI(this.roleForm)
      //       }
      //       // 编辑成功 重新获取 所有角色信息
      //       this.getAllRole()
      //       // 提示成功信息
      //       this.$message.success('操作成功')
      //       // 关闭表单
      //       this.showDialog = false
      //     } catch (error) {
      //       this.$message.fail('操作失败')
      //     }
      //   } else {
      //     this.$message.fail('校验失败')
      //   }
      // })
      try {
        // 表单校验
        await this.$refs.roleForm.validate()
        if (this.roleForm.id) {
          // 编辑任务
          // 再提交后台 编辑成功
          await editRoleByIdAPI(this.roleForm)
        } else {
          // 新增任务
          const res = await addRoleAPI(this.roleForm)
          console.log(res)
        }
        // 操作成功
        this.$message.success('操作成功')
        // 重新拉去 所有角色数据
        this.getAllRole()
        // 关闭表单
        this.showDialog = false
      } catch (error) {
        this.$message.fail(error)
      }
    },
    btnClose() {
      // 数据清空
      this.roleForm = {

      }
      // 重置表单
      this.$refs.roleForm.resetFields()
      // 关闭弹层
      this.showDialog = false
    },

    // 7. 获取所有权限点
    async getPermissionList(id) {
      // this.permData = await getPermissionListAPI()
      this.permData = transListToTreeData(await getPermissionListAPI(), '0')
      console.log(this.permData)

      // 数据回写
      this.roleId = id
      // 角色和权限的信息关联 根据id
      const { permIds } = await getDetailRoleByIdAPI(id)
      this.selectPerm = permIds
      this.showPermDialog = true
    },

    // 8. 分配权限
    // 确定
    async  btnPermOk() {
      const permList = this.$refs.addPerm.getCheckedKeys()
      try {
        await assignPermAPI({ id: this.roleId, permIds: permList })
        this.$message.success('分配权限成功')
        this.showPermDialog = false
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 取消

    btnPermCancel() {
      this.selectPerm = []
      this.showPermDialog = false
    }
  }
}
</script>

<style>

</style>
